<template>
  <div class="app">
    <Header ref="HeaderComponentRef"></Header>
    <button ref="buttonRef">按钮</button>
    <button @click="getButton">拿到button元素</button>
    <button @click="getHeader">拿到Header组件实例</button>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import {ref, onMounted} from "vue"

export default {
  name: 'App',
  components: {Header},

  setup(props, context) {
    //定义一个ref对象名字为buttonRef
    const buttonRef = ref()
    const HeaderComponentRef = ref()
    const getButton = () => {
      console.log(buttonRef.value)
    }
    const getHeader = () => {
      console.log(HeaderComponentRef.value)
    }
    onMounted(() => {
      console.log(buttonRef.value)
      console.log(HeaderComponentRef.value)
    })
    return {
      buttonRef,
      HeaderComponentRef,
      getButton,
      getHeader
    }
  },
}
</script>

<style lang="less"></style>
